@page "/icons"
@inherits BasePage
@using MduiBlazor.Shared.Pages.Examples.Icons

<PageTitle>图标</PageTitle>
<div class="mdui-m-y-5">
    <MduiText Typo="@Typo.display1" TextColor="@Colors.Theme.Primary">图标</MduiText>
    <p>MDUI 内置了 Material Icons 的 932 个图标，除了这些图标，你也可以使用第三方的图标。</p>
</div>

<PageContent>
    <PageContentItem Title="Material图标" OnClick="@(_=>ScrollToElementById("materialicon"))" />
    <PageContentItem Title="第三方图标" OnClick="@(_=>ScrollToElementById("thirdicon"))" />
    <PageContentItem Title="组件参数" OnClick="@(_=>ScrollToElementById("attr"))" />
</PageContent>

<MduiDivider Class="mdui-m-y-5" />

<div>
    <h2 id="materialicon">
        <MduiText Typo="@Typo.headline" TextColor="@Colors.Theme.Primary">Material图标</MduiText>
    </h2>

    <p class="mdui-typo">我们列出了所有<a href="material_icon">Material Icons</a>的图标，你可以直接点击图标获取图标代码。</p>
    <ExampleSection Component="@typeof(MaterialIcons)" />

    <p class="mdui-typo">图标可以用在按钮中。</p>
    <ExampleSection Component="@typeof(ButtonWithIcon)" />
</div>

<MduiDivider Class="mdui-m-y-5" />

<div>
    <h2 id="thirdicon">
        <MduiText Typo="@Typo.headline" TextColor="@Colors.Theme.Primary">第三方图标</MduiText>
    </h2>

    <p class="mdui-typo">要使用第三方图标库，需要先引入第三方图标库的 CSS 文件。然后在<code>MduiIcon</code>、<code>MduiIconButton</code>等含有图标的组件中设置<code>Custom</code>参数为<code>true</code>。下面的实例使用的是 <a href="http://ionicons.com" target="_blank">ionicons</a> 的图标。</p>
    <ExampleSection Component="@typeof(ThirdIcons)" />
</div>

<MduiDivider Class="mdui-m-y-5" />

<div>
    <h2 id="attr">
        <MduiText Typo="@Typo.headline" TextColor="@Colors.Theme.Primary">组件参数</MduiText>
    </h2>

    <MduiTableContainer UseMduiTypo Class="mdui-m-y-1">
         <MduiSimpleTable>
             <thead>
                 <th>参数名称</th>
                 <th>类型/返回类型</th>
                 <th>说明</th>
             </thead>
             <tbody>
                 <tr>
                     <td>
                         <code>Icon</code>
                     </td>
                     <td>
                         <code>string?</code>
                     </td>
                     <td>Material图标或者第三方图标的类名。</td>
                 </tr>
                 <tr>
                     <td>
                         <code>Color</code>
                     </td>
                     <td>
                         <code>string?</code>
                     </td>
                     <td>图标前景颜色。</td>
                 </tr>
                 <tr>
                     <td>
                         <code>Custom</code>
                     </td>
                     <td>
                         <code>bool</code>
                     </td>
                     <td>是否为第三方图标，默认<code>false</code>。</td>
                 </tr>
             </tbody>
         </MduiSimpleTable>
     </MduiTableContainer>
 </div>